<template>
  <view class="work-container">
    <view 
      class="tutorial-item" 
      v-for="tutorial in tutorials" 
      :key="tutorial.id" 
      @click="goToDetail(tutorial.id)">
      <view class="image-wrapper">
        <image 
          class="tutorial-image" 
          :src="getCover(tutorial.id)"
          mode="aspectFill"
        />
      </view>
      <text class="tutorial-text">{{ tutorial.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tutorials: []
    }
  },
  onLoad() {
    this.getTutorials();
  },
  methods: {
    getTutorials() {
      uni.request({
        url: 'https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/tutorial/web/tutorials.json',
        success: (res) => {
          if (res.statusCode === 200 && Array.isArray(res.data)) {
            this.tutorials = res.data;
          } else {
            console.error('Failed to load tutorials or data is not an array.');
          }
        },
        fail: (err) => {
          console.error('Request failed:', err);
        }
      })
    },
    getCover(id) {
      // 支持后期如有单独cover字段可优先用，否则默认拼接
      return `https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/tutorial/web/${id}/img/img.png`;
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/tutorial/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.work-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tutorial-item {
  /* 紧凑卡片布局，调低整体高度 */
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  padding: 8px 10px 12px 10px;
  transition: transform 0.2s;
  min-height: 120px;
  margin-bottom: 8px;
}

.tutorial-item:active {     
  transform: scale(0.98);
}

.image-wrapper {
  position: relative;
  width: 100%;
  // 修改为更矮比例（如60%对应5:3）
  padding-top: 30%;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f7f7f7;
  min-height: 80px; // 避免超短
}

.tutorial-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.tutorial-text {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  line-height: 1.3;
}
</style>
